<template>
  <div>
    <el-upload 
    :action="uploadUrl" 
    list-type="picture-card" 
    :on-preview="handlePictureCardPreview" 
    multiple
    :on-success="handleSuccess"
    :file-list="fileList"
    ref="upload"
    :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
import {uploadUrl} from '@/api/base'
import {host} from '@/api/base'
  export default {
    props:{
      fileList:{
        type:Array,
        default:function(){
          return []
        }
      }
    },
    data() {
      return {
        uploadUrl,
        host,
        // fileList:[],//上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
        // dialogImageUrl: '',
        // dialogVisible: false
      };
    },
    methods: {
      //上传图片
      handleSuccess(response,file,fileList){
        console.log('上传图片成功',response,file,fileList);
        let url = response.url.slice(7)
        let imgUrl = host+'/'+url
        console.log('图片url',imgUrl);
        this.$emit('sendImg',imgUrl)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      clear(){
        // this.fileList=[];
        this.$refs.upload.clearFiles();
      }
    }
  }
</script>

<style>
</style>